<!-- 拓展信息 -->
<template>
  <div v-loading="loading">
    <ProTable
      ref="proTable"
      :columns="columns"
      :data="list"
      row-key="attrAsName"
      :tool-button="false"
      :pagination="false"
      :height="list.length > 0 ? '' : 200"
    ></ProTable>
  </div>
</template>

<script setup lang="ts" name="ExpandInfo">
import { ref, reactive, PropType, watch } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { User } from "@/api/interface";
import { findAttributesByEavNo } from "@/api/modules/common";
import ProTable from "@/components/ProTable/index.vue";

interface Details {
  eno: number;
  categoryEavId: number;
}

const props = defineProps({
  type: {
    type: String
  },
  details: {
    type: Object as PropType<Details>,
    required: true
  }
});

const columns = reactive<ColumnProps<User.ResUserList>[]>([
  { type: "index", label: "序号", width: 70 },
  { prop: "attrGroupName", label: "类型" },
  { prop: "attrAsName", label: "标题" },
  { prop: "value", label: "内容" }
]);

const list = ref<any[]>([]);
const loading = ref(false);

watch(
  () => props.details,
  (newVal, oldVal) => {
    let eavNo = 0;
    if (props.type == "change" && newVal.eno) {
      // 变更
      eavNo = newVal.eno;
    } else if (props.type == "problem" && newVal.categoryEavId) {
      // 问题
      eavNo = newVal.categoryEavId;
    }
    if (newVal.eno != oldVal.eno) {
      list.value = [];
      loading.value = true;
      findAttributesByEavNo({
        "attrsQueryDTO.eavNo": eavNo
      })
        .then((res: any) => {
          list.value = res || [];
          loading.value = false;
        })
        .catch(() => {
          loading.value = false;
        });
    }
  }
);
</script>

<style scoped>
:deep(.card) {
  padding: 0;
  border: none;
}
</style>
